<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        background-color: #000;
        color: #fff;
        width: 100%;
        height: 100vh;
      }

      .container {
        width: 100%;
      }

      .header {
        top: 0;
        left: 0;
        width: 100%;
        z-index: 10;
      }

      .nav {
        display: flex;
        justify-content: flex-end;
        gap: 20px;
        padding: 20px 40px;
      }

      .nav > div {
        padding: 0 5px;
        position: relative;
        cursor: pointer;
      }

      .nav > div::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 50%;
        width: 0;
        height: 2px;
        background-color: white;
        transform: translateX(-50%);
        transition: all 0.3s ease;
      }

      .nav > div:hover::after {
        width: 100%;
      }

      .video-scroll-container {
        position: relative;
      }

      canvas {
        position: sticky;
        top: 0;
        width: 100%;
        height: 100vh;
        display: block;
      }

      video {
        display: none;
      }

      .info {
        background-color: #fff;
        color: #000;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
        padding: 50px;
        font-size: 1.5rem;
        position: relative;
        z-index: 5;
      }

      .info > img {
        max-width: 600px;
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        object-fit: cover;
      }

      .footer {
        background-color: #222;
        color: #aaa;
        text-align: center;
        padding: 40px;
        min-height: 200px;
      }
    </style>
  </head>
  <body>
    <header class="header">
      <nav class="nav">
        <div>首页</div>
        <div>更多</div>
        <div>关于</div>
      </nav>
    </header>

    <main class="body-content">
      <div class="video-scroll-container">
        <canvas></canvas>
      </div>
      <div class="info">
        <p>这里是视频播放结束后的内容。</p>
        <img src="../../public/img/1.jpg" alt="Landscape" />
      </div>
    </main>

    <footer class="footer">
      <p>这是页脚区域。</p>
    </footer>

    <video src="../../public/video/1.mp4" muted playsinline crossorigin="anonymous"></video>

    <script>
      window.onload = () => {
        const canvas = document.querySelector('canvas')
        const video = document.querySelector('video')
        const videoScrollContainer = document.querySelector('.video-scroll-container')
        const ctx = canvas.getContext('2d')

        if (!canvas || !video || !ctx || !videoScrollContainer) return

        const FRAME_CAPTURE_INTERVAL = 4
        const SCROLL_MULTIPLIER = 200

        let frameMap = new Map()
        let isWorkerDone = false
        let totalFrames = 0
        let worker

        const setCanvasSize = () => {
          canvas.width = window.innerWidth
          canvas.height = window.innerHeight
          renderCurrentFrame()
        }

        const renderCurrentFrame = () => {
          if (!video.duration) return

          const scrollableHeight = videoScrollContainer.scrollHeight - window.innerHeight
          const scrollTop = window.scrollY || document.documentElement.scrollTop
          const scrollProgress = Math.min(1, Math.max(0, scrollTop / scrollableHeight))

          if (isWorkerDone) {
            const frameIndex = Math.floor(scrollProgress * (totalFrames - 1))
            const frame = frameMap.get(frameIndex)
            if (frame) {
              ctx.clearRect(0, 0, canvas.width, canvas.height)
              ctx.drawImage(frame, 0, 0, canvas.width, canvas.height)
            }
          } else {
            const videoTime = scrollProgress * video.duration
            if (Math.abs(video.currentTime - videoTime) > 0.1) {
              video.currentTime = videoTime
            }
          }
        }

        video.addEventListener('loadedmetadata', () => {
          const fps = 25
          totalFrames = Math.floor((video.duration * fps) / FRAME_CAPTURE_INTERVAL)
          const scrollHeightForVideo = video.duration * SCROLL_MULTIPLIER
          videoScrollContainer.style.height = `${scrollHeightForVideo + window.innerHeight}px`

          video.currentTime = 0
          video.addEventListener('seeked', () => {
            if (!isWorkerDone) {
              ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
            }
          })

          if (window.Worker) {
            worker = new Worker('worker.js')
            worker.onmessage = e => {
              if (e.data.type === 'framesReady') {
                frameMap = e.data.frameMap
                isWorkerDone = true
                video.pause()
                console.log('worker完成,切换渲染模式')
                renderCurrentFrame()
              }
            }
            worker.postMessage({
              type: 'init',
              videoUrl: video.src,
              totalFrames: totalFrames,
              interval: FRAME_CAPTURE_INTERVAL / fps,
            })
          }
        })

        let rafId
        window.addEventListener('scroll', () => {
          cancelAnimationFrame(rafId)
          rafId = requestAnimationFrame(renderCurrentFrame)
        })

        window.addEventListener('resize', setCanvasSize)
        setCanvasSize()
        video.load()
      }
    </script>
  </body>
</html>
